@extends('layouts.mobile_main')

@section('title', '我的红包')

@section('resources')
    @parent
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
        .red_packet_yes li{width: 100%;height: 2.4rem;background: url({{env('IMAGE_DOMAIN')}}images/background_r.png) 0 0 no-repeat;margin-top: 0.2rem;background-size: 100%;}
        .double_card_no li{width: 100%;height: 2.4rem;background: url({{env('IMAGE_DOMAIN')}}images/background_g.png) 0 0 no-repeat;margin-top: 0.2rem;background-size: 100%;}
        .double_card_name{width: 2.7rem;height: 1.5rem;margin: 0.45rem 0.1rem;line-height: 1.5rem;border: 0;}
        .double_card_nameno{width: 2.7rem;height: 1.5rem;margin: 0.45rem 0.1rem;padding-top: 0.15rem;border: 0;}
        .double_card_news{margin: 0.6rem 0rem;width: 7.2rem;}
    </style>
@endsection

@section('content')
<div class="paysu_outer" style="padding-top: 2.55rem">
	<header class="pay_sure oh" style="background-color: #fff;position:fixed;top:0;left:0;">
		<a class="fl" href="javascript:history.go(-1);">
		  <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
        </a>
		<span class="fl co_violet fz_48">我的红包</span>
	</header>
	<section>
		<p class="double_card_text oh">
			<span class="fz_40 tc" style="color: #9955C6;border-bottom:5px solid #9955C6">可用</span>
			<span class="fz_40 tc">历史</span>
		</p>
		<div class="red_packet_outer">
			<!-- 可用红包 -->
            <ul class="red_packet_yes">
                @foreach($availablelists as $list)
                    <li class="oh co_white">
                        <div class="fz_58 double_card_name fl tc" style="line-height: 1.5rem;">
                            <p>{{$list['amount']}}</p>
                        @if($list['minimumamount'] != 0.00)
                            <p class="fl fz_40"style="width: 100%;">满{{$list['minimumamount']}}可用</p>
                        @endif
                        </div>
                        <div class="double_card_news fl tc" style="margin: 0.6rem 0rem;">
                        @if($list['cityname'] != '')
                            <p class="fz_44">限{{$list['cityname']}}使用</p>
                        @else
                            <p class="fz_44">全国通用</p>
                        @endif
                        @if($list['firstclassname'] != '')
                            <p class="fz_44">限{{$list['firstclassname']}}使用</p>
                        @endif
                            <p class="fz_34">有效期至<span>{{date('Y-m-d', strtotime($list['endtime']))}}</span></p>
                        </div>
                    </li>
                @endforeach
            </ul>
			<!-- 已用或过期红包 -->
			@if(count($historylists)>0)
                @foreach($historylists as $list)
                    <ul class="double_card_no" style="display: none;">
                        <li class="oh co_white">
                            <p class="fz_58 double_card_nameno fl tc">{{$list['amount']}}
                            @if($list['status'] == '1')
                                <span class="fz_40 fl">已使用</span>
                            @else
                                <span class="fz_40 fl">已使用</span>
                            @endif
                            </p>
                            <div class="double_card_news fl tc">
                                <p class="fz_44">消费满{{$list['minimumamount']}}可用</p>
                                <p class="fz_34" style="margin-top: 0.3rem;">有效期至<span>{{date('Y-m-d',strtotime($list['endtime']))}}</span></p>
                            </div>
                        </li>
                    </ul>
                @endforeach
            @endif
		</div>
	</section>
</div>
@endsection

@section("scriptResources")
    @parent
    <script>
        window.onresize=function(){
            pagesp();
        }
        $(function(){
            var paysu_outer_h=$(window).height()-$(".pay_detail").height()-$(".double_card_text").height();
            $(".paysu_outer").css({"min-height":paysu_outer_h-1});

            $(".double_card_text span").eq(0).click(function(){
                $(".double_card_text span").eq(0).css({"border-bottom":"5px solid #9955C6","color":"#9B58C7"}).siblings().css({"border-bottom":"none","color":"#808080"});
                $(".double_card_none").show();
                $(".red_packet_yes").show();
                $(".double_card_no").hide();
            })
            $(".double_card_text span").eq(1).click(function(){
                $(".double_card_text span").eq(1).css({"border-bottom":"5px solid #9955C6","color":"#9B58C7"}).siblings().css({"border-bottom":"none","color":"#808080"});
                $(".double_card_none").hide();
                $(".red_packet_yes").hide();
                $(".double_card_no").show();
            })
        })
    </script>
@endsection
